<template>
    <Category :scene="1"></Category>
    <el-card style="margin:10px 0">
        <el-button type="primary" icon="Top">上架</el-button>
        <el-button type="default" icon="Bottom">下架</el-button>
        <el-button type="danger" icon="Delete">删除</el-button>
        <el-table border style="margin: 10px 0px;" height="570" :data="skuArr">
            <el-table-column label="序号" type="index" align="center" width="80px" fixed></el-table-column>
            <el-table-column label="名称" align="center" show-overflow-tooltip="true" width="200px"
                prop="skuName"></el-table-column>
            <el-table-column label="描述" align="center" show-overflow-tooltip="true" width="400px"
                prop="skuDesc"></el-table-column>
            <el-table-column label="默认图片" align="center" width="250px">
                <template #="{ row, $index }">
                    <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" fit="cover"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="重量(g)" align="center" width="150px" prop="weight"></el-table-column>
            <el-table-column label="价格(元)" align="center" width="150px" prop="price"></el-table-column>
            <el-table-column label="操作" align="center" width="300px" fixed="right">
                <template #="{ row, $index }">
                    <el-button type="default" :icon="row.isSale ? 'Bottom' : 'Top'" size="small"
                        @click="updateSale(row)"></el-button>
                    <el-button type="primary" icon="Edit" size="small" @click="updateSku(row)"></el-button>
                    <el-button type="info" icon="View" size="small" @click="showSku(row)"></el-button>

                    <el-popconfirm width="220" icon="InfoFilled" icon-color="#626AEF" :title="`是否确定删除--${row.skuName}?`"
                        @confirm="deleteSku(row)">
                        <template #reference>
                            <el-button type="danger" size="small" icon="Delete" title="删除SPU"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" background
            :page-sizes="[20, 40, 60, 80]" layout=" prev, pager, next, jumper,->,sizes,total" :total="total"
            @current-change="getHasSku" @size-change='handler' />
    </el-card>

    <el-drawer v-model="drawer" direction="rtl" size="30%">
        <template #header>
            <h4>SKU详情</h4>
        </template>
        <template #default>
            <el-row class="rowStyle">
                <el-col :span="5">名称</el-col>
                <el-col :span="18">{{ skuInfo.skuName }}</el-col>
            </el-row>
            <el-row class="rowStyle">
                <el-col :span="5">描述</el-col>
                <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
            </el-row>
            <el-row class="rowStyle">
                <el-col :span="5">价格</el-col>
                <el-col :span="18">{{ skuInfo.price }} 元</el-col>
            </el-row>
            <el-row class="rowStyle">
                <el-col :span="5">重量</el-col>
                <el-col :span="18">{{ skuInfo.weight }} g</el-col>
            </el-row>
            <el-row class="rowStyle">
                <el-col :span="5">平台属性</el-col>
                <el-col :span="18">
                    <el-tag style="margin-bottom:10px; margin-right: 10px;"
                        v-for="(item, index) in skuInfo.skuAttrValueList" :key="item.id">{{ item.valueName
                        }}</el-tag>
                </el-col>
            </el-row>
            <el-row class="rowStyle">
                <el-col :span="5">销售属性</el-col>
                <el-col :span="18">
                    <el-tag style="margin-bottom:10px; margin-right: 10px;"
                        v-for="(item, index) in skuInfo.skuSaleAttrValueList" :key="item.id">{{ item.saleAttrValueName
                        }}</el-tag>
                </el-col>
            </el-row>
            <el-row class="rowStyle">
                <el-col :span="5">商品图片</el-col>
                <el-col :span="18">
                    <el-carousel :interval="4000" type="card" height="200px" indicator-position="outside">
                        <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item">
                            <el-image :src="item.imgUrl" style="width: 100%; height:100%"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelShowSku">关闭</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue';
    import { reqHasSku, reqSaleSku, reqCancelSaleSku, reqSkuInfo, reqRemoveSku } from '@/api/product/sku'
    import type { SkuData, SkuInfoData } from '@/api/product/spu/type';
    import type { SkuResponseData } from '@/api/product/sku/type';
    import { ElMessage } from 'element-plus';

    const drawer = ref(false)

    // 分页器默认页码 分页器默认一页几条数据
    const pageNo = ref<number>(1)
    const pageSize = ref<number>(20)
    const total = ref<number>(0)

    const skuArr = ref<SkuData[]>([])
    const skuInfo = ref<SkuData>({
        category3Id: 0,
        spuId: 0,
        tmId: 0,
        id: 0,
        skuName: '加载中',
        isSale: true,
        price: 99.00,
        weight: 10,
        skuDesc: '加载中',
        skuAttrValueList: [],
        skuSaleAttrValueList: [],
        skuDefaultImg: '加载中'
    })

    onMounted(() => {
        getHasSku()
    })

    const getHasSku = async (pager = 1) => {
        pageNo.value = pager
        let res: SkuResponseData = await reqHasSku(pageNo.value, pageSize.value)
        if (res.code = 200) {
            ElMessage({
                type: 'success',
                message: '加载成功!'
            })
            skuArr.value = res.data.records
            total.value = res.data.total
        } else {
            ElMessage({
                type: 'error',
                message: '加载失败!'
            })
        }
    }

    const handler = (clickPageSize: number) => {
        pageSize.value = clickPageSize
        getHasSku(1)
    }

    const updateSale = async (row: SkuData) => {
        console.log(row.isSale)
        if (!row.isSale) {
            let res: any = await reqSaleSku((row.id as number))
            // console.log('上架上架上架上架上架上架', res)
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '上架成功！'
                })
                getHasSku(pageNo.value)
            } else {
                ElMessage({
                    type: 'error',
                    message: '上架失败！'
                })
            }
        } else {
            let res: any = await reqCancelSaleSku((row.id as number))
            // console.log('下架下架下架下架下架下架', res)
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '下架成功！'
                })
                getHasSku(pageNo.value)
            } else {
                ElMessage({
                    type: 'error',
                    message: '下架失败！'
                })
            }
        }
    }
    // 程序员在努力的更新中...
    const updateSku = (row: SkuData) => {
        ElMessage({
            type: 'info',
            message: '程序员在努力的更新中...'
        })
    }

    const showSku = async (row: SkuData) => {
        let res: SkuInfoData = await reqSkuInfo((row.id as number))
        if (res.code == 200) {
            skuInfo.value = res.data
            drawer.value = true
            console.log(skuInfo.value)
        } else {
            ElMessage({
                type: 'error',
                message: '网络错误,加载失败!'
            })
        }
    }

    const cancelShowSku = () => {
        drawer.value = false
    }

    const deleteSku = async (row: SkuData) => {
        console.log(row, '删除')
        let res: any = await reqRemoveSku((row.id as number))
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getHasSku(skuArr.value.length > 1 ? pageNo.value : pageNo.value - 1)
        } else {
            ElMessage({
                type: 'error',
                message: '删除失败!'
            })
        }
    }
</script>

<style scoped lang="scss">
    .rowStyle {
        margin: 12px 0px !important;
        box-sizing: border-box;
    }

    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
</style>